<template>
    <ul>
        <router-link to="/films/nowshowing" custom v-slot="{navigate,isActive}">
            <li @click="navigate">
                <span :class="isActive?'kerwinactive':''">正在上映</span>
            </li>
        </router-link>
        <router-link to="/films/comingsoon" custom v-slot="{navigate,isActive}">
            <li @click="navigate" >
                <span :class="isActive?'kerwinactive':''">即将上映</span>
            </li>
        </router-link>
    </ul>
</template>
<script>
export default {

}
</script>
<style lang="scss" scoped>
ul{
    display: flex;
}
li{
    flex:1;
    line-height: 6.25rem;
    text-align: center;
}
span{
    font-size: 2.5rem;
}
.kerwinactive{
  color:red;
  font-size: 2.5rem;
  border-bottom:.125rem solid red;
}
</style>
